<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="panelbar">
        <title>Configuration, methods and events of Kendo UI PanelBar</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Configure the PanelBar UI widget, use methods and explore the events which are triggered upon certain behaviors.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/ui/panelbar.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/ui/panelbar.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendouipanelbar"><a href="#kendouipanelbar">kendo.ui.PanelBar</a></h1>

<p>Represents the Kendo UI PanelBar widget. Inherits from <a href="/api/javascript/ui/widget">Widget</a>.</p>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-animation">
<a href="#configuration-animation">animation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h3>

<p>A collection of visual animations used when <strong>PanelBar</strong> items are expand or collapsed through
user interactions. Setting this option to <code>false</code> will disable all animations.</p>

<p><code>animation:true</code> is not a valid configuration.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar({
        animation: {
            // fade-out closing items over 1000 milliseconds
            collapse: {
                duration: 1000,
                effects: "fadeOut"
            },
           // fade-in and expand opening items over 500 milliseconds
           expand: {
               duration: 500,
               effects: "expandVertical fadeIn"
           }
       }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.collapse">
<a href="#configuration-animation.collapse">animation.collapse </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The visual animation(s) that will be used when <strong>PanelBar</strong> items are closed.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar({
        animation: {
            collapse: {
                duration: 200,
                effects: "fadeOut"
            }
        }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.collapse.duration">
<a href="#configuration-animation.collapse.duration">animation.collapse.duration </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 200)</em>
</h3>

<p>The number of milliseconds used for the visual animation when a <strong>PanelBar</strong> item is closed.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar({
        animation: {
           collapse: {
                duration: 1000
           }
      }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.collapse.effects">
<a href="#configuration-animation.collapse.effects">animation.collapse.effects </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>A whitespace-delimited string of animation effects that are utilized when a <strong>PanelBar</strong> item
is closed. Options include <strong>"fadeOut"</strong>.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar({
        animation: {
            collapse: {
                duration: 1000,
                effects: "fadeOut"
            }
        }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.expand">
<a href="#configuration-animation.expand">animation.expand </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The visual animation(s) that will be used when opening items.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar({
        animation: {
            expand: {
                duration: 200,
                effects: "expandVertical"
            }
        }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.expand.duration">
<a href="#configuration-animation.expand.duration">animation.expand.duration </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 200)</em>
</h3>

<p>The number of milliseconds used for the visual animation when an item is opened.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar({
     animation: {
          expand: {
              duration: 1000
          }
       }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.expand.effects">
<a href="#configuration-animation.expand.effects">animation.expand.effects </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "expandVertical")</em>
</h3>

<p>A whitespace-delimited string of animation effects that are used when an item is expanded. Options include
<strong>"expandVertical"</strong> and <strong>"fadeIn"</strong>.</p>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar({
        animation: {
            expand: {
                effects: "expandVertical"
            }
        }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-autoBind">
<a href="#configuration-autoBind">autoBind </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>false</code> the widget will not bind to the data source during initialization. In this case data binding will occur when the <a href="/api/javascript/data/datasource#events-change">change</a> event of the
data source is fired. By default the widget will bind to the data source specified in the configuration.</p>

<blockquote>
<p>Setting <code>autoBind</code> to <code>false</code> is useful when multiple widgets are bound to the same data source. Disabling automatic binding ensures that the shared data source does not make more than one request to the remote service.</p>
</blockquote>

<h4>Example - disable automatic binding</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
var dataSource = new kendo.data.HierarchicalDataSource({
  data: [ { text: "Jane Doe" }, { text: "John Doe" }]
});
$("#panelbar").kendoPanelBar({
  autoBind: false,
  dataSource: dataSource
});
dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound
&lt;/script&gt;
</code></pre>

<h3 id="configuration-contentUrls">
<a href="#configuration-contentUrls">contentUrls </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>Sets an array with the URLs from which the <strong>PanelBar</strong> items content to be loaded from. If only specific items should be loaded via Ajax, then you should set the URLs to the corresponding positions in the array and set the other elements to null.</p>

<h4>Example - specify that the second item should be loaded remotely</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
      &lt;div&gt;Content 1&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
        Ajax Item
        &lt;div&gt;&lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#panelbar").kendoPanelBar({
        contentUrls: [
          null,
          "https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html"
        ]
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-dataImageUrlField">
<a href="#configuration-dataImageUrlField">dataImageUrlField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: null)</em>
</h3>

<p>Sets the field of the data item that provides the image URL of the <strong>PanelBar</strong> nodes.</p>

<h4>Example - specify custom image URL field</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
var items = [
  { text: "Baseball", image: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png" },
  { text: "Golf", image: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png" }
];
$("#panelbar").kendoPanelBar({
  dataImageUrlField: "image",
  dataSource: items
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-dataSource">
<a href="#configuration-dataSource">dataSource </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array |</code></a><code>kendo.data.HierarchicalDataSource</code>
</h3>

<p>The data source of the widget which is used render nodes. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array or an existing <a href="/api/javascript/data/hierarchicaldatasource">kendo.data.HierarchicalDataSource</a> instance.</p>

<p>If the <code>dataSource</code> option is set to a JavaScript object or array the widget will initialize a new <a href="/api/javascript/data/hierarchicaldatasource">kendo.data.HierarchicalDataSource</a> instance using that value as data source configuration.</p>

<p>If the <code>dataSource</code> option is an existing <a href="/api/javascript/data/hierarchicaldatasource">kendo.data.HierarchicalDataSource</a> instance the widget will use that instance and will <strong>not</strong> initialize a new one.</p>

<h4>Example - set dataSource as a JavaScript object</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
$("#panelbar").kendoTreeView({
  dataSource: {
    data: [
      { text: "foo", items: [
        { text: "bar" }
      ] }
    ]
  }
});
&lt;/script&gt;
</code></pre>

<h4>Example - set dataSource as a JavaScript array</h4>

<pre><code>&lt;ul id="panelbar"&gt;&lt;/ul&gt;
&lt;script&gt;
  $("#panelbar").kendoPanelBar({
      dataSource: [
          {
              text: "Item 1 (link)",
              cssClass: "myClass",                            // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
              url: "http://www.kendoui.com/"                  // link URL if navigation is needed (optional)
          },
          {
              text: "&lt;b&gt;Item 2&lt;/b&gt;",
              encoded: false,                                 // Allows use of HTML for item text
              content: "text"                                 // content within an item
          },
          {
              text: "Item 3",
              // content URL to load within an item
              contentUrl: "https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html"
          },
          {
              text: "Item 4",
              // item image URL, optional
              imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png",
              expanded: true,                                 // item is rendered expanded
              items: [{                                       // Sub item collection.
                  text: "Sub Item 1"
              },
              {
                  text: "Sub Item 2"
              }]
          },
          {
              text: "Item 5"
          }
      ]
  });
&lt;/script&gt;
</code></pre>

<h4>Example - set dataSource as an existing kendo.data.HierarchicalDataSource instance</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
var dataSource = new kendo.data.HierarchicalDataSource({
  transport: {
    read: {
      url: "https://demos.telerik.com/kendo-ui/service/Employees",
      dataType: "jsonp"
    }
  },
  schema: {
    model: {
      id: "EmployeeId",
      hasChildren: "HasEmployees"
    }
  }
});

$("#panelbar").kendoPanelBar({
  dataSource: dataSource,
  dataTextField: "FullName"
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-dataSpriteCssClassField">
<a href="#configuration-dataSpriteCssClassField">dataSpriteCssClassField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: null)</em>
</h3>

<p>Sets the field of the data item that provides the sprite CSS class of the nodes.
If an array, each level uses the field that is at the same index in the array, or the last item in the array.</p>

<h4>Example</h4>

<pre><code>&lt;style&gt;
    #panelbar .k-sprite {
        background-image: url("https://demos.telerik.com/kendo-ui/content/shared/styles/flags.png");
    }    
&lt;/style&gt;
&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
var items = [
  { text: "Brazil", sprite: "brazilFlag" },
  { text: "India", sprite: "indiaFlag" }
];
$("#panelbar").kendoPanelBar({
  dataSpriteCssClassField: "sprite",
  dataSource: items
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-dataTextField">
<a href="#configuration-dataTextField">dataTextField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: null)</em>
</h3>

<p>Sets the field of the data item that provides the text content of the nodes.
If an array, each level uses the field that is at the same index in the array, or the last item in the array.</p>

<h4>Example</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
var items = [
  { ProductName: "Tea", items: [
    { ProductName: "Green Tea" },
    { ProductName: "Black Tea" }
  ] },
  { ProductName: "Coffee" }
];
$("#panelbar").kendoPanelBar({
  dataTextField: "ProductName",
  dataSource: items
});
&lt;/script&gt;
</code></pre>

<h4>Example - using different fields on different levels</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
var items = [
  { CategoryName: "Tea", items: [
    { ProductName: "Green Tea" },
    { ProductName: "Black Tea" }
  ] },
  { CategoryName: "Coffee" }
];
$("#panelbar").kendoPanelBar({
  dataTextField: [ "CategoryName", "ProductName" ],
  dataSource: items
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-dataUrlField">
<a href="#configuration-dataUrlField">dataUrlField </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: null)</em>
</h3>

<p>Sets the field of the data item that provides the link URL of the nodes.</p>

<h4>Example</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
var items = [
  { text: "Tea", LinksTo: "http://tea.example.com" },
  { text: "Coffee", LinksTo: "http://coffee.example.com" }
];
$("#panelbar").kendoPanelBar({
  dataUrlField: "LinksTo",
  dataSource: items
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-expandMode">
<a href="#configuration-expandMode">expandMode </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "multiple")</em>
</h3>

<p>Specifies how the <strong>PanelBar</strong> items are displayed when opened and closed. The following values
are available:</p>

<h4><em>"single"</em></h4>

<p>Display one item at a time when an item is opened; opening an item will close the previously opened item.</p>

<h4><em>"multiple"</em></h4>

<p>Display multiple values at one time; opening an item has no visual impact on any other items in the <strong>PanelBar</strong>.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar({
        expandMode: "single"
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-loadOnDemand">
<a href="#configuration-loadOnDemand">loadOnDemand </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>Indicates whether the child DataSources should be fetched lazily when parent groups get expanded.
Setting this to false causes all child DataSources to be loaded at initialization time.</p>

<h4>Example - force lazy loading of sublevels</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
$("#panelbar").kendoPanelBar({
  loadOnDemand: true,
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-messages">
<a href="#configuration-messages">messages </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The text messages displayed in the widget. Use it to customize or localize the messages.</p>

<h4>Example - customize TreeView messages</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
$("#panelbar").kendoPanelBar({
  dataSource: {
    transport: {
      read: function(options) {
        // request always fails after 1s
        setTimeout(function() {
          options.error({});
        }, 1000);
      }
    }
  },
  messages: {
    retry: "Wiederholen",
    requestFailed: "Anforderung fehlgeschlagen.",
    loading: "Laden..."
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-messages.loading">
<a href="#configuration-messages.loading">messages.loading </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "Loading...")</em>
</h3>

<p>The text message shown while the root level items are loading.</p>

<h4>Example - customize loading message</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
$("#panelbar").kendoPanelBar({
  dataSource: {
    transport: {
      read: function(options) {
        // request always fails after 1s
        setTimeout(function() {
          options.error({});
        }, 1000);
      }
    }
  },
  messages: {
    loading: "Laden..."
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-messages.requestFailed">
<a href="#configuration-messages.requestFailed">messages.requestFailed </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "Request failed.")</em>
</h3>

<p>The text message shown when an error occurs while fetching the content.</p>

<h4>Example - customize requestFailed message</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
$("#panelbar").kendoPanelBar({
  dataSource: {
    transport: {
      read: function(options) {
        // request always fails after 1s
        setTimeout(function() {
          options.error({});
        }, 1000);
      }
    }
  },
  messages: {
    requestFailed: "Anforderung fehlgeschlagen."
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-messages.retry">
<a href="#configuration-messages.retry">messages.retry </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "Retry")</em>
</h3>

<p>The text message shown in the retry button.</p>

<h4>Example - customize retry message</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
$("#panelbar").kendoPanelBar({
  dataSource: {
    transport: {
      read: function(options) {
        // request always fails after 1s
        setTimeout(function() {
          options.error({});
        }, 1000);
      }
    }
  },
  messages: {
    retry: "Wiederholen"
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-template">
<a href="#configuration-template">template </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>Template for rendering each node.</p>

<h4>Example</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
$("#panelbar").kendoPanelBar({
  template: "#= item.text # (#= item.inStock #)",
  dataSource: [
    { text: "foo", inStock: 7, items: [
      { text: "bar", inStock: 2 },
      { text: "baz", inStock: 5 }
    ] }
  ]
});
&lt;/script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-append"><a href="#methods-append">append</a></h3>

<p>Appends an item(s) to the PanelBar.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();

    var panelBar = $("#panelbar").data("kendoPanelBar");
    panelBar.append(
        [
            {
                text: "Item 1",
                cssClass: "myClass",                            // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
                url: "http://www.telerik.com/"                  // link URL if navigation is needed, optional.
            },
            {
                text: "&lt;b&gt;Item 2&lt;/b&gt;",
                encoded: false,                                 // Allows use of HTML for item text
                content: "text"                                 // content within an item
            },
            {
                text: "Item 3",
                contentUrl: "https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html"
            },
            {
                text: "Item 4",
                imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png",
                expanded: true,                                 // item is rendered expanded
                items: [{                                       // Sub item collection.
                    text: "Sub Item 1"
                },
                {
                    text: "Sub Item 2"
                }]
            },
            {
                text: "Item 5",
                // item image sprite CSS class, optional
                spriteCssClass: "imageClass3"
            }
        ]
    );
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>item <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>Target item, specified as the JSON representation of an object. You can pass item <code>text</code>, <code>content</code> or
<code>contentUrl</code> here. Can handle an HTML string or array of such strings or JSON.</p>

<h5>referenceItem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>A reference item to append the new item in the PanelBar, can be omitted.</p>

<h4>Returns</h4>

<p><code>kendo.ui.PanelBar</code> Returns the PanelBar object to support chaining.</p>

<h3 id="methods-clearSelection"><a href="#methods-clearSelection">clearSelection</a></h3>

<p>Clears the currently selected PanelBar items.</p>

<h4>Example - clear selection</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li id="item1"&gt;Item 1&lt;/li&gt;
    &lt;li id="item2"&gt;Item 2&lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    // create a PanelBar instance and get it.
    var panelBar = $("#panelbar").kendoPanelBar().data("kendoPanelBar");

    // select the element with ID "item1"
    panelBar.select($("#item1"));

    // select the element with ID "item2"
    panelBar.select($("#item2"));

    // clear all selection
    setTimeout(function() {
      panelBar.clearSelection();
    }, 2000);
&lt;/script&gt;
</code></pre>

<h3 id="methods-collapse"><a href="#methods-collapse">collapse</a></h3>

<p>Collapses the specified item(s) of a <strong>PanelBar</strong>.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li id="item1"&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li id="item2"&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();
    // access an existing PanelBar instance
    var panelBar = $("#panelbar").data("kendoPanelBar");
    // collapse the element with ID, "item1"
    panelBar.collapse($("#item1"));
    // collapse the element with ID, "item2" without visual animations
    panelBar.collapse($("#item2"), false);
    // collapse all list items that start with ID, "item"
    panelBar.collapse($('[id^="item"]'));
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The <strong>PanelBar</strong> item(s) to be collapsed, expressed as a string containing a selector
expression or represented by a <a href="http://api.jquery.com/category/selectors/">jQuery selector</a>.</p>

<h5>useAnimation <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h5>

<p>_optional, default: _</p>

<p>Temporarily enables (<strong>true</strong>) or disables (<strong>false</strong>) any visual animation(s)
when collapsing items.</p>

<h4>Returns</h4>

<p><code>kendo.ui.PanelBar</code> Returns the PanelBar object to support chaining.</p>

<h3 id="methods-destroy"><a href="#methods-destroy">destroy</a></h3>

<p>Prepares the <strong>PanelBar</strong> for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.</p>

<blockquote>
<p><strong>Important:</strong> This method does not remove the PanelBar element from DOM.</p>
</blockquote>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();
    var panelBar = $("#panelbar").data("kendoPanelBar");

    // detach events
    panelBar.destroy();
&lt;/script&gt;
</code></pre>

<h3 id="methods-enable"><a href="#methods-enable">enable</a></h3>

<p>Enables (<strong>true</strong>) or disables (<strong>false</strong>) the specified item(s) of the
<strong>PanelBar</strong>.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li id="item1"&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li id="item2"&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();
    // access an existing PanelBar instance
    var panelBar = $("#panelbar").data("kendoPanelBar");
    // enable the item of the PanelBar with ID, "item1"
    panelBar.enable($("#item1"), true);
    // disable the currently selected item of the PanelBar
    var item = panelBar.select();
    panelBar.enable($("#item2"), false);
    // disable all list items that start with ID, "item"
    panelBar.enable($('[id^="item"]'), false);
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The <strong>PanelBar</strong> item(s) to be enabled (<strong>true</strong>) or disabled (<strong>false</strong>), expressed as a
string containing a selector expression or represented by a
<a href="http://api.jquery.com/category/selectors/">jQuery selector</a>.</p>

<h5>enable <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h5>

<p>The desired state - enabled (<strong>true</strong>) or disabled (<strong>false</strong>) - of the target
element(s).</p>

<h3 id="methods-expand"><a href="#methods-expand">expand</a></h3>

<p>Expands the specified item(s) of a <strong>PanelBar</strong>.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li id="item1"&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li id="item2"&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();
    // access an existing PanelBar instance
    var panelBar = $("#panelbar").data("kendoPanelBar");
    // expand the element with ID, "item1"
    panelBar.expand($("#item1"));
    // expand the element with ID, "item2" without visual animations
    panelBar.expand($("#item2"), false);
    // expand all list items that start with ID, "item"
    panelBar.expand($('[id^="item"]'));
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The <strong>PanelBar</strong> item(s) to be expanded, expressed as a selector.</p>

<h5>useAnimation <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h5>

<p>_optional, default: _</p>

<p>Temporarily enables (<strong>true</strong>) or disables (<strong>false</strong>) any visual animation(s) when expanding items.</p>

<h4>Returns</h4>

<p><code>kendo.ui.PanelBar</code> Returns the PanelBar object to support chaining.</p>

<h3 id="methods-insertAfter"><a href="#methods-insertAfter">insertAfter</a></h3>

<p>Inserts a PanelBar item after the specified referenceItem</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();

    var panelBar = $("#panelbar").data("kendoPanelBar");

    panelBar.insertAfter(
        [{
            text: "Item 1",
            url: "http://www.telerik.com"                // Link URL if navigation is needed, optional.
        },
        {
            text: "&lt;b&gt;Item 2&lt;/b&gt;",
            encoded: false,                              // Allows use of HTML for item text
            content: "text"                              // Content for the content element
        },
        {
            text: "Item 3",
            contentUrl: "https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html"
        },
        {
            text: "Item 4",
            imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png",
            expanded: true,                              // item is rendered expanded
            items: [{                                    // Sub item collection.
                 text: "Sub Item 1"
            },
            {
                 text: "Sub Item 2"
            }]
        },
        {
            text: "Item 5"
        }],
        "li:first-child"
    );
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>item <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>Target item, specified as a JSON object. You can pass item <code>text</code>, <code>content</code> or <code>contentUrl</code> here. Can handle an HTML string or array of such strings or JSON.</p>

<h5>referenceItem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>A reference item to insert the new item after</p>

<h3 id="methods-insertBefore"><a href="#methods-insertBefore">insertBefore</a></h3>

<p>Inserts a PanelBar item before the specified referenceItem</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();

    var panelBar = $("#panelbar").data("kendoPanelBar");

    panelBar.insertBefore(
        [{
            text: "Item 1",
            url: "http://www.telerik.com"                // Link URL if navigation is needed, optional.
        },
        {
            text: "&lt;b&gt;Item 2&lt;/b&gt;",
            encoded: false,                              // Allows use of HTML for item text
            content: "text"                              // Content for the content element
        },
        {
            text: "Item 3",
            contentUrl: "https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html"
        },
        {
            text: "Item 4",
            imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png",
            expanded: true,                              // item is rendered expanded
            items: [{                                    // Sub item collection.
                 text: "Sub Item 1"
            },
            {
                 text: "Sub Item 2"
            }]
        },
        {
            text: "Item 5"
        }],
        "li:last-child"
    );
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>item <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>Target item, specified as a JSON object. You can pass item <code>text</code>, <code>content</code> or <code>contentUrl</code> here. Can handle an
TML string or array of such strings or JSON.</p>

<h5>referenceItem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>A reference item to insert the new item before.</p>

<h4>Returns</h4>

<p><code>kendo.ui.PanelBar</code> Returns the PanelBar object to support chaining.</p>

<h3 id="methods-reload"><a href="#methods-reload">reload</a></h3>

<p>Reloads the content of a <strong>PanelBar</strong> from an AJAX request.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();
    // get a reference to the panel bar
    var panelBar = $("#panelbar").data("kendoPanelBar");
    // reload the panel bar
    panelBar.reload("&gt; .k-item");
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>Target element</p>

<h3 id="methods-remove"><a href="#methods-remove">remove</a></h3>

<p>Removes the specified PanelBar item(s).</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li id="Item1"&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();
    // get a reference to the panel bar
    var panelBar = $("#panelbar").data("kendoPanelBar");
    // remove Item 1
    panelBar.remove("#Item1");
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The <strong>PanelBar</strong> item(s) to be removed, expressed as a selector string, DOM element or a jQuery object.</p>

<h3 id="methods-select"><a href="#methods-select">select</a></h3>

<p>Gets or sets the selected item.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li id="item1"&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();
    // access an existing PanelBar instance
    var panelBar = $("#panelbar").data("kendoPanelBar");
    // select the item with ID, "item1"
    panelBar.select("#item1");
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>element <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a> <em>(optional)</em>
</h5>

<p>The <strong>PanelBar</strong> item to be selected, expressed as a string containing a selector expression or
represented by a <a href="http://api.jquery.com/category/selectors/">jQuery selector</a>.</p>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a> the selected item if called without arguments. <code>kendo.ui.PanelBar</code> if called with arguments.</p>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-activate"><a href="#events-activate">activate</a></h3>

<p>Triggered when an item of a PanelBar is activated.</p>

<h4>Event Data</h4>

<h5>e.item <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element</code></a>
</h5>

<p>The activated item of the PanelBar.</p>

<h4>Attach activate event handler during initialization; detach via unbind()</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    // event handler for activate
    var onActivate = function(e) {
        // access the activated item via e.item (HTMLElement)

        // detach activate event handler via unbind()
        panelBar.data("kendoPanelBar").unbind("activate", onActivate);
    };

    // attach activate event handler during initialization
    var panelBar = $("#panelbar").kendoPanelBar({
        activate: onActivate
    });
&lt;/script&gt;
</code></pre>

<h4>Attach activate event handler via bind(); detach via unbind()</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();

    // event handler for activate
    var onActivate = function(e) {
        // access the activated item via e.item (HTMLElement)

        // detach activate event handler via unbind()
        $("#panelbar").data("kendoPanelBar").unbind("activate", onActivate);
    };

    // attach activate event handler via bind()
    $("#panelbar").data("kendoPanelBar").bind("activate", onActivate);
&lt;/script&gt;
</code></pre>

<h3 id="events-collapse"><a href="#events-collapse">collapse</a></h3>

<p>Triggered when an item of a PanelBar is collapsed.</p>

<h4>Event Data</h4>

<h5>e.item <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element</code></a>
</h5>

<p>The collapsing item of the PanelBar.</p>

<h4>Attach collapse event handler during initialization; detach via unbind()</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    // event handler for collapse
    var onCollapse = function(e) {
        // access the collapsed item via e.item (HTMLElement)

        // detach collapse event handler via unbind()
        panelBar.data("kendoPanelBar").unbind("collapse", onCollapse);
    };

    // attach collapse event handler during initialization
    var panelBar = $("#panelbar").kendoPanelBar({
        collapse: onCollapse
    });
&lt;/script&gt;
</code></pre>

<h4>Attach collapse event handler via bind(); detach via unbind()</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();

    // event handler for collapse
    var onCollapse = function(e) {
        // access the collapsed item via e.item (HTMLElement)

        // detach collapse event handler via unbind()
        $("#panelbar").data("kendoPanelBar").unbind("collapse", onCollapse);
    };

    // attach collapse event handler via bind()
    $("#panelbar").data("kendoPanelBar").bind("collapse", onCollapse);
&lt;/script&gt;
</code></pre>

<h3 id="events-contentLoad"><a href="#events-contentLoad">contentLoad</a></h3>

<p>Fires when content is fetched from an AJAX request.</p>

<h4>Event Data</h4>

<h5>e.item <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element</code></a>
</h5>

<p>The selected item</p>

<h5>e.contentElement <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element</code></a>
</h5>

<p>The loaded content element</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar({
        contentLoad: function(e) {
            // handle event
        }
    });
&lt;/script&gt;
</code></pre>

<h4>To set after initialization</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    // get a reference to the panel bar
    var panelBar = $("#panelbar").data("kendoPanelBar");
    // bind the contentLoad event
    panelBar.bind("contentLoad", function(e) {
        // handle event
    });
&lt;/script&gt;
</code></pre>

<h3 id="events-dataBound"><a href="#events-dataBound">dataBound</a></h3>

<p>Triggered after the dataSource change event has been processed (adding/removing items);</p>

<h4>Event Data</h4>

<h5>e.node <a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The node whose children have been changed. If the changes have occurred on the root level, this parameter is undefined.</p>

<h4>Example - subscribe to the "dataBound" event during initialization</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
$("#panelbar").kendoPanelBar({
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ],
  dataBound: function(e) {
    console.log("DataBound", e.node);
  }
});
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "dataBound" event after initialization</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
function panelbar_dataBound(e) {
  console.log("DataBound", e.node);
}
$("#panelbar").kendoPanelBar({
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
var panelbar = $("#panelbar").data("kendoPanelBar");
panelbar.bind("dataBound", panelbar_dataBound);
&lt;/script&gt;
</code></pre>

<h4>Example - show an empty message when no items have been loaded from the server</h4>

<pre><code>&lt;div id="panelbar"&gt;&lt;/div&gt;
&lt;script&gt;
  $("#panelbar").kendoPanelBar({
    dataSource: [],
    dataBound: function(e) {
      if (!this.dataSource.data().length) {
        this.element.append("&lt;p class='no-items'&gt;No items yet.&lt;/p&gt;");
      } else {
        this.element.find(".no-items").remove();
      }
    }
  });
&lt;/script&gt;
</code></pre>

<h3 id="events-error"><a href="#events-error">error</a></h3>

<p>Fires when AJAX request results in an error.</p>

<blockquote>
<p>This event won't fire if you use jQuery 3.x. More information is available <a href="https://github.com/telerik/kendo-ui-core/issues/2296">here</a>.</p>
</blockquote>

<h4>Event Data</h4>

<h5>e.xhr <code>jqXHR</code>
</h5>

<p>The jqXHR object used to load the content</p>

<h5>e.status <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The returned status.</p>

<h4>Example</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar({
        error: function(e) {
            // handle event
        }
    });
&lt;/script&gt;
</code></pre>

<h4>To set after initialization</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();
    // get a reference to the panel bar
    var panelBar = $("#panelbar").data("kendoPanelBar");
    // bind the error ajax event
    panelBar.bind("error", function(e) {
        // handle event
    });
&lt;/script&gt;
</code></pre>

<h3 id="events-expand"><a href="#events-expand">expand</a></h3>

<p>Triggered when an item of a PanelBar is expanded.</p>

<h4>Event Data</h4>

<h5>e.item <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element</code></a>
</h5>

<p>The expanding item of the PanelBar.</p>

<h4>Attach expand event handler during initialization; detach via unbind()</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    // event handler for expand
    var onExpand = function(e) {
        // access the expanded item via e.item (HTMLElement)

        // detach expand event handler via unbind()
        panelBar.data("kendoPanelBar").unbind("expand", onExpand);
    };

    // attach expand event handler during initialization
    var panelBar = $("#panelbar").kendoPanelBar({
        expand: onExpand
    });
&lt;/script&gt;
</code></pre>

<h4>Attach expand event handler via bind(); detach via unbind()</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();

    // event handler for expand
    var onExpand = function(e) {
        // access the expanded item via e.item (HTMLElement)

        // detach expand event handler via unbind()
        $("#panelbar").data("kendoPanelBar").unbind("expand", onExpand);
    };

    // attach expand event handler via bind()
    $("#panelbar").data("kendoPanelBar").bind("expand", onExpand);
&lt;/script&gt;
</code></pre>

<h3 id="events-select"><a href="#events-select">select</a></h3>

<p>Triggered when an item of a PanelBar is selected by the user.</p>

<h4>Event Data</h4>

<h5>e.item <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" class="type-link"><code>Element</code></a>
</h5>

<p>The selected item of the PanelBar.</p>

<h4>Attach select event handler during initialization; detach via unbind()</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    // event handler for select
    var onSelect = function(e) {
        // access the selected item via e.item (HTMLElement)

        // detach select event handler via unbind()
        panelBar.data("kendoPanelBar").unbind("select", onSelect);
    };

    // attach select event handler during initialization
    var panelBar = $("#panelbar").kendoPanelBar({
        select: onSelect
    }).data("kendoPanelBar");
&lt;/script&gt;
</code></pre>

<h4>Attach select event handler via bind(); detach via unbind()</h4>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
            &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;li&gt;Sub Item 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
    $("#panelbar").kendoPanelBar();

    // event handler for select
    var onSelect = function(e) {
        // access the selected item via e.item (HTMLElement)

        // detach select event handler via unbind()
        $("#panelbar").data("kendoPanelBar").unbind("select", onSelect);
    };

    // attach select event handler via bind()
    $("#panelbar").data("kendoPanelBar").bind("select", onSelect);
&lt;/script&gt;
</code></pre> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

